<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>购物车</title>
<link href="./css/common.css" rel="stylesheet" />
<link href="./css/common-head-footer.css" rel="stylesheet" />
<link href="./css/shop-car.css" rel="stylesheet" />
<link href="./css/bank-logo.css" rel="stylesheet"/>
<script type="text/javascript" src="./js/util.js"></script>
<script type="text/javascript">
function selectAll(obj){
	var pitems=document.getElementsByName("pitem");
	for(var i=0;i<pitems.length;i++){
		pitems[i].checked=obj.checked;
	}
}
function goPrePage(){
	window.location="shop-car-02.jsp";
}
function goNextPage(){
	window.location="shop-car-04.jsp";
}
function addAttachements(){
	var attas_container=document.getElementById("attas_container");
	var file=document.createElement("span");
	file.innerHTML="<input type=\"file\" name=\"attachements\" />&nbsp;<a href=\"javascript:void(0)\" onclick=\"deleteAttachement(this)\">删除</a><br/>";
	attas_container.appendChild(file);
}
function deleteAttachement(obj){
	if(confirm("确认删除？")){
		obj.parentNode.parentNode.removeChild(obj.parentNode);
	}
}
function selectType(obj){
	var typevalue=obj.value;
	for(var i=1;i<5;i++){
		var paytypec=document.getElementById("paytypec"+i);
		if(i==typevalue){
			paytypec.style.display="block";
		}
		else{
			paytypec.style.display="none";
		}
	}
}
function init(){
	initDefaultPayType(1);
	initListener();
}
function initListener(){
	var bankList=document.getElementById("bankList");
	var banks=bankList.childNodes;
	for(var i=0;i<banks.length;i++){
		banks[i].onclick=function(){
			if(window.currentBankItem){
				if(window.currentBankItem==this){
					window.currentBankItem.style.border="2px solid #ccc";
					window.currentBankItem=null;
				}
				else{
					window.currentBankItem.style.border="2px solid #ccc";
					this.style.border="2px solid #f00";
					window.currentBankItem=this;
				}
			}
			else{
				window.currentBankItem=this;
				window.currentBankItem.style.border="2px solid #f00";
			}
		};
	}
}
function initDefaultPayType(index){
	for(var i=1;i<5;i++){
		var paytypec=document.getElementById("paytypec"+i);
		if(i==index){
			paytypec.style.display="block";
		}
		else{
			paytypec.style.display="none";
		}
	}
}
window.onload=function(){
	init();
};
</script>
</head>
<body>
<jsp:include page="./sub-blocks/header-block.jsp"></jsp:include>
<div class="shop-car-panel">
	<div class="location-bar"  onselectstart="return false;">
		<div class="point-tip">购物车</div>
		<div class="arr-icon"></div>
		<div class="point-tip">购物车预览</div>
		<div class="arr-icon"></div>
		<div class="point-tip-on">填写订单</div>
		<div class="arr-icon"></div>
		<div class="point-tip">预览订单</div>
		<div class="arr-icon"></div>
		<div class="point-tip">完成订单</div>
	</div>
	<div class="product-list-container">
		<table width="100%" border="0" cellpadding="0" cellspacing="0">
			<tr class="th">
				<td width="10">&nbsp;</td>
				<td>名称</td>
				<td>分类</td>
				<td>单价</td>
				<td>数量</td>
				<td>小计</td>
				<td>&nbsp;</td>
			</tr>
			<tr class="tb">
				<td>1</td>
				<td>惠普笔记本电脑</td>
				<td>笔记本</td>
				<td>4500￥</td>
				<td>2</td>
				<td>9000￥</td>
				<td><a href="javascript:void(0)">删除</a></td>
			</tr>
			<tr class="tb">
				<td>2</td>
				<td>惠普笔记本电脑</td>
				<td>笔记本</td>
				<td>4500￥</td>
				<td>2</td>
				<td>9000￥</td>
				<td><a href="javascript:void(0)">删除</a></td>
			</tr>
		</table>
		<table width="100%" border="0" cellpadding="0" cellspacing="0">
			<tr class="tf">
				<td class="right">支付总额：9000￥</td>
			</tr>
		</table>
		<div class="order-form-detail">
			<!-- 支付方式 -->
			<div class="block-title"><div>支付方式</div></div>
			<div class="block-content">
				<input type="radio" value="1" onclick="selectType(this)" checked="checked" name="payType" id="paytype1"/>
				<label for="paytype1">在线支付</label>&nbsp;&nbsp;
				<input type="radio" value="2" onclick="selectType(this)" name="payType" id="paytype2"/>
				<label for="paytype2">现金支付</label>&nbsp;&nbsp;
				<input type="radio" value="3" onclick="selectType(this)" name="payType" id="paytype3"/>
				<label for="paytype3">银行汇款</label>&nbsp;&nbsp;
				<input type="radio" value="4" onclick="selectType(this)" name="payType" id="paytype4"/>
				<label for="paytype4">其他支付方式</label>&nbsp;&nbsp;
				<br/>
				<div id="paytypec1" class="pay-detail">
					<div class="bank-list" id="bankList">
						<div class="bank1"></div>
						<div class="bank2"></div>
						<div class="bank3"></div>
						<div class="bank4"></div>
						<div class="bank5"></div>
						<div class="bank6"></div>
						<div class="bank7"></div>
						<div class="bank8"></div>
						<div class="bank9"></div>
						<div class="bank10"></div>
						<div class="bank11"></div>
						<div class="bank12"></div>
						<div class="bank12"></div>
						<div class="bank12"></div>
					</div>
				</div>
				<div id="paytypec2" class="pay-detail">
				</div>
				<div id="paytypec3" class="pay-detail">
					银&nbsp;&nbsp;&nbsp;&nbsp;行：<input type="text" name="bankname" size="40" /><br/>
					帐&nbsp;&nbsp;&nbsp;&nbsp;号：<input type="text" name="bankname" size="40" /><br/>
					开户人：<input type="text" name="bankname" size="40" /><br/>
				</div>
				<div id="paytypec4" class="pay-detail">
					支付说明：<input type="text" size="80" />
				</div>
			</div>
			
			<!-- 送货方式 -->
			<div class="block-title"><div>送货方式</div></div>
			<div class="block-content">
				<input type="radio" checked="checked"  name="songhuotype" id="songhuotype1" /><label for="songhuotype1">新华物流</label>&nbsp;&nbsp;
				<input type="radio"  name="songhuotype" id="songhuotype2" /><label for="songhuotype2">圆通快递</label>&nbsp;&nbsp;
				<input type="radio"  name="songhuotype" id="songhuotype3" /><label for="songhuotype3">邮局配送</label>&nbsp;<br/>
				<table border="0" cellpadding="0" cellspacing="0" width="100%">
					<tr>
						<td width="90" nowrap="nowrap">详细地址：</td>
						<td><input type="text" name="songhuo_address" size="80" /></td>
					</tr>
					<tr>
						<td>邮编编码：</td>
						<td><input type="text" name="songhuo_address" size="10" /></td>
					</tr>
					<tr>
						<td>联系人：</td>
						<td><input type="text" name="songhuo_address" size="15" /></td>
					</tr>
					<tr>
						<td>联系电话：</td>
						<td><input type="text" name="songhuo_address" size="20" /></td>
					</tr>
				</table>
			</div>
			
			<!-- 权责声明 -->
			<div class="block-title"><div>权责声明</div></div>
			<div class="block-content">
				<textarea rows="10" cols="90" name="right_desc" id="right_desc"></textarea>
			</div>
			
			<!-- 权责声明 -->
			<div class="block-title"><div>备注</div></div>
			<div class="block-content">
				<textarea rows="10" cols="90" name="remark_desc" id="remark_desc"></textarea>
			</div>
			
			
			<!-- 添加附件 -->
			<div class="block-title"><div>添加附件</div></div>
			<div class="block-content">
				<input type="button" onclick="addAttachements()" value="增加附件" /><br/>
				<div id="attas_container">
					<span><input type="file" name="attachements" />&nbsp;<a href="javascript:void(0)" onclick="deleteAttachement(this)">删除</a><br/></span>	
				</div>
			</div>
			
		</div>
		<table width="100%" border="0" cellpadding="0" cellspacing="0">
			<tr class="tf">
				<td class="right">
					<input type="button" class="pre" onclick="javascript:goPrePage()" />
					<input type="button" class="next"  onclick="javascript:goNextPage()"/>
				</td>
			</tr>
		</table>
	</div>
</div>
<jsp:include page="./sub-blocks/footer-block.jsp"></jsp:include>
</body>
</html>